<template>
  <div class="cart-container">
    <el-card class="box-card" shadow="hover">
      <h2>Your Cart</h2>
      <el-table :data="products" stripe border show-summary :summary-method="getSummaries" style="width: 100%">
        <el-table-column type="index" label="ID" width="180"> </el-table-column>
        <el-table-column prop="title" label="姓名"> </el-table-column>
        <el-table-column prop="price" sortable label="单价"> </el-table-column>
        <el-table-column prop="quantity" sortable label="商品数量">
        </el-table-column>
        <el-table-column align="center">
          <template slot-scope="scope">
            <el-button
              plain
              type="success"
              size="mini"
              @click="handleAdd(scope.row)"
              >add</el-button
            >
            <el-button
              plain
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >Delete</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <p v-show="!products.length">
      <i>Please add some products to cart.</i>
    </p>
    <!-- <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.title }} - {{ product.price | currency }} x
        {{ product.quantity }}
      </li>
    </ul> -->
    <!-- <p>Total: {{ total | currency }}</p>
    <p>
      <button :disabled="!products.length" @click="checkout(products)">
        Checkout
      </button>
    </p> -->
    <!-- <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p> -->
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      checkoutStatus: (state) => state.cart.checkoutStatus,
    }),
    ...mapGetters("cart", {
      products: "cartProducts",
      total: "cartTotalPrice",
    }),
  },
  methods: {
    checkout(products) {
      this.$store.dispatch("cart/checkout", products);
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总价";
          return;
        };
        const values = data.map((item) => Number(item[column.property]));
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += " 元";
        } else {
          sums[index] = "N/A";
        }
      });

      return sums;
    },
    handleAdd() {},
    handleDelete() {},
  },
  watch: {
    tableData: function () {
      let _this = this;
      this.$nextTick(() => {
        debugger;
        console.log(_this.$refs.tableRef.$refs);
        let html = _this.$refs.tableRef.$refs.footerWrapper
          .querySelector(".el-table__footer")
          .querySelectorAll("td")[5]
          .querySelector(".cell");
        html.innerHTML = "<button onclick='vm.detail()'>查看</button>";
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cart-container {
  width: 1000px;
  height: auto;
  margin: 0 auto;
  padding: 10px 10px;
  .box-card {
    width: 100%;
  }
}
</style>